<template>
    <div class="clist">
        <dl>
            <dt>
                <span class="circle" @click="status = !status"><i v-show="status"></i></span>
                <span>秀馆唐福旗舰店</span>
                <span class="iconfont">&#xe63f;</span>
                <span>2029-05-15</span>
                <span>8:00</span>
            </dt>
            <dd>
                <div class="cir" @click="status = !status"><span class="circle"><i v-show="status"></i></span></div>
                <div class=""><img src="@/assets/img/brand/brand1.png" alt="" /></div>
                <div class="dd-right">
                    <ul>
                        <li>秀馆唐福古筝丝旗袍</li>
                        <li>颜色分类：金黄</li>
                        <li>尺码：M</li>
                        <li>
                            ￥395.2
                            <span>￥556</span>
                        </li>
                        <li>
                            <p>
                                <span @click="handleChange">+</span>
                                <span v-model="num">{{ num }}</span>
                                <span @click="Change">-</span>
                            </p>
                            <span class="delete">删除</span>
                        </li>
                    </ul>
                </div>
            </dd>
        </dl>
        <div class="total">
            <p @click="status = !status"><span class="circle"><i v-show="status"></i></span> 全选</p>
            <p>总计：<i class="count">0</i>元</p>
            <p>包含运费：<i class="count">0</i>元</p>
            <p class="settlement">结算</p>
        </div>
    </div>
</template>


<script>
export default {
    data(){
        return{
            num:1,
            status:false
        }
    },
    methods: {
      handleChange() {
        this.num++
      },
      Change() {
          if(this.num <=0){
            this.num=0
          }
          else{
            this.num--
          }
      }
    }
}
</script>

<style scoped>
.clist{
    margin-top: 2.5rem;
    width: 100%;
    box-sizing: border-box;
    padding: 10px;
    min-height:563px; 
}
dt,dd{
    display: flex;
    justify-content: space-between;
    box-sizing: border-box;
    padding: .4rem;
}
dd img{
    width: 5rem;
}
dl{
    background:antiquewhite;
    border-radius: .2rem;
    width: 100%;
    color: #3b0807;
    font-size: .8rem;
    margin-top: 10px;
}
dl .iconfont{
    color: #ffffff;
}
dd{
    background:#dcc3a8;
}
.circle,.circle i{
    display: inline-block;
    width: .7rem;
    height: .7rem;
    border-radius: 50%;
    background: #ffffff;
    position: relative;
}
.circle i{
    width: .5rem;
    height: .5rem;
    background: #f3591b;
    position: absolute;
    top: .1rem;
    left: .1rem;
}

.cir span{
    top: 45%;
}
.dd-right{
    width: 55%;
}
ul li{
    color: #3b0807;
}
ul  li:nth-child(1){
    font-size: 13px;
    font-weight: normal;
    line-height: 1.5rem;
}
ul  li:nth-child(2),ul  li:nth-child(3){
    font-size: 10px;
    color: #4c4c4c;
    line-height: 1rem;
}
ul  li:nth-child(4){
    font-size: 15px;
    font-style: normal;
    margin-top: 10%;
}
ul  li:nth-child(4) span{
    display: inline-block;
    vertical-align: top;
    font-size: 11px;
    line-height: 19px;
    font-style: normal;
    text-decoration: line-through;
    padding-left: 15px;
}

ul  li:nth-child(5){
    position: relative;
    line-height: 1.5rem;
}
ul  li:nth-child(5) p  span{
    display: inline-block;
    width: 1rem;
    height: 1rem;
    line-height: 1rem;
    border:1px solid #ffffff;
    text-align: center;
    color: #ffffff;
}
.delete{
    position: absolute;
    bottom: 0;
    right: 0;
    background: antiquewhite;
    padding: 3px;
    line-height: 1rem;
}
.total{
    position: fixed;
    bottom: 2.8rem;
    left: 0;
    display: flex;
    font-size: .8rem;
    line-height: 2.2rem;
    background: #995d45;
    width: 100%;
    justify-content: space-between;
    color: #f6e0c2;
}
.total .count{
    display: inline-block;
    vertical-align: top;
    font-size: 15px;
    color: #e7160f;
    padding: 0px 5px;
}
.total .settlement{
    color:#ffffff;
    background:  #e7160f;
    text-align: center;
}
.total p:nth-child(4),.total p:nth-child(1){
    padding: 0 12px;
}
</style>
